<template>
    <div class="user-Collection">
        <div class="userCollection">
            <!-- <ul class="order-tab">
                <li class="active">店铺收藏</li>
                <li >商品收藏</li>
            </ul> -->
            <ul class="tabs clearfix order-tab">
                <li v-for="(tab,index) in tabsName">
                    <a class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>
                </li>
            </ul>
            <div class="cards">
                <div class="tab-card" style="display: block;">
                    <!-- 123 -->
                    <div class="common-form" v-for="item in shop" @touchstart="showDeleteButton(item.c_id)" @touchend="clearLoop">
                        <a class="collect-shop" @click="switchTo('/Shop/' + item.merchant_id)">
                            <img :src="url + item.logo" />
                            {{item.merchant_name}}
                            <em>进入店铺&gt;</em>
                        </a>
                    </div>
                </div>
                <div class="tab-card" style="display: none;">
                    <!-- qweqwe -->
                    <div class="common-form" v-for="item in shop"  @touchstart="showDeleteButton(item.c_id)" @touchend="clearLoop">
                        <div class="order-shop" @click="switchTo('/VipDetail/' + item.id)">
                            <!-- <p class="order-shop-tel"><i></i>李东东的店铺</p> -->
                            <a class="order-shop-info">
                                <img :src="url + item.thumbnail">
                                <div>
                                    <p>{{item.goods_title}}</p>
                                    <p>餐具套装（2人装），白色，1件</p>
                                    <p>￥{{item.market_price}} <del>￥{{item.price}}</del></p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <!-- 店铺收藏 -->
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
    export default {
        name:"UserCollection",
        data(){
            return {
                shop:[], //收藏列表
                // goods:[],//收藏商品列表
                url:'http://api.huiwanzhong365.com',
                tabsName: [
                    {
                        name: "店铺收藏",
                        isActive: true
                    }, {
                        name: "商品收藏",
                        isActive: false
                    }
                ],
                active: false
            }
        },
        methods:{
            switchTo(path){
                // console.log(this.$router)
                this.$router.push(path)
            },
            // 选项卡
            tabsSwitch: function(tabIndex) {
                console.log(tabIndex)
                var tabCardCollection = document.querySelectorAll(".tab-card"),
                    len = tabCardCollection.length;
                for(var i = 0; i < len; i++) {
                    tabCardCollection[i].style.display = "none";
                    this.tabsName[i].isActive = false;
                }
                if(tabIndex == 1){
                    this.Collection(0)
                }else{
                    this.Collection(1)
                }
                this.tabsName[tabIndex].isActive = true;
                tabCardCollection[tabIndex].style.display = "block";
            },
            // 我的收藏列表
            Collection:function(index){
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
                    type:index
                }
                this.$http.post('/index/user/Collection',qs.stringify(upload)).then(rs=>{
					console.log(rs.data)
					this.shop = rs.data.data
                }).catch(err=>{
                    console.log(err)
                })
            },
            // 长按删除
            showDeleteButton(e) {

                var that = this;
                this.Loop = setTimeout(function(){
                    var openid =  localStorage.getItem("openid")
                    layer.open({
                        content: '确定要删除此地址'
                        ,btn: ['确定', '不要']
                        ,yes: function(index){
                            // location.reload();
                            var upload = {
                                openid:openid,
                                c_id:e
                            }
                            that.$http.post('/index/user/deleteCollection',qs.stringify(upload)).then(rs=>{
                                console.log(rs.data.id)
                                console.log('删除成功')
                                //that.list();
                                //this.tabIndex = rs.data.id
                                that.tabsSwitch(1)
                            }).catch(err=>{
                                console.log(err)
                            })
                            layer.close(index);
                        }
                    });
                    
                },1000);
            },
            clearLoop(e) {
                clearInterval(this.Loop);
            },
        },
        mounted(){
            this.Collection(1);
        }
    }
</script>

<style scoped>
.order-tab li {
    width: 50% !important;
    float: left;
    text-align: center;
    padding: 13px 0;
}
.active{
    color: #FC2847 !important;
    font-weight: 600 !important;
    background: #f9f9f9 !important;
}
.order-shop,.order-pay{
    width: 94%;
    margin: 3% auto;
    display: inline-block;
    margin-left: 3%;
}
.order-shop-tel{
	border-bottom: 1px solid #f2f2f2;
	padding-bottom: 10px;
	font-weight: 600;
}
.order-shop-tel i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../../assets/cart.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: left;
    margin-right: 5px;
}
.order-shop-more{
    width: 100%;
    height: 38px;
    line-height: 38px;
    display: inline-block;
}
.order-shop div:nth-child(5) em,.order-shop div:nth-child(4) em,.order-shop div:nth-child(3) em,.order-shop div:nth-child(6) input{
	 float: right;
}

.order-shop div:nth-child(6) input{
	width:100px;
	text-align: right;
	border:0;
	outline: none;
    padding: 10px 0;
}
.order-shop img{
	width:80px;
	height:80px;
	border-radius: 5px;
	float: left;
}
.order-shop-info{
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    margin-top:10px;	
}
.order-shop-info div{
    float: left;
    margin-left: 2%;
    width: 71%;
}
.order-shop-info div p:nth-child(1){
	width:100%;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-shop-info div p:nth-child(2){
	color:#999;
	margin:10px 0;
	font-size:12px;
}
.order-shop-info div p:nth-child(3){
	color:#FE2746;
	font-weight: 600;
}
.order-shop-info div p:nth-child(3) del{
	color:#999;
	font-size:12px;
	font-weight: normal;
}
.order-shop-tel em{
    color: #FC2847;
    font-size:12px;
    float: right;
}
.order-more{
    width:100%;
    text-align: right;
}
.order-more p{
    font-size:12px;
}
.order-more-gary{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(123, 123, 123, 0.08);
    color: #999;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(238, 238, 238, 1);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
}
.order-more-pink{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 0.08);
    color: #FC2847;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(254, 39, 70, 0.08);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
}
.collect-tel{
	padding: 2% 3%;
    display: inline-block;
    width: 94%;
}
.collect-tel span{
	width:50%;
	float: left;
	text-align: center;
}
.collect-shop img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px;
    float:left;
}
.collect-shop{
	line-height: 60px;
}
.collect-shop em{
	font-size:12px;
	color:#999;
	float: right;
	padding: 0 10px;
}

</style>